<template>
  <div>
    <el-dialog :title="dialog.title" :visible.sync="dialog.visible" width="50%">
      <el-row style="margin: 5px;border-bottom: #DCDCDC 1px solid;">
        <el-col :span="12">姓名:{{ detail.name }}</el-col>
        <el-col :span="12">手机号:{{ detail.phoneNum }}</el-col>
      </el-row>
      <el-row style="margin: 5px;border-bottom: #DCDCDC 1px solid;">
        <el-col :span="12">打卡时间:{{ detail.punchTime }}</el-col>
        <el-col :span="12">获得积分:{{ detail.points }}</el-col>
      </el-row>
      <label style="margin: 5px;">打卡内容</label>
      <el-row style="margin: 5px;border-bottom: #DCDCDC 1px solid;">
        <el-col :span="24">
          <el-col :span="12">{{ detail.memo }}</el-col>
        </el-col>
      </el-row>
      <label style="margin: 5px;">打卡图片</label>
      <el-row style="margin: 5px;border-bottom: #DCDCDC 1px solid;">
        <el-col :span="24">
          <el-image
            v-for="imageUrl in detail.imageUrls"
            :src="imageUrl"
            :key="imageUrl"
            style="width:120px;height:120px" :preview-src-list="[imageUrl]" 
          />
        </el-col>
      </el-row>
      <label style="margin: 5px;">打卡视频</label>
      <el-row style="margin: 5px;border-bottom: #DCDCDC 1px solid;">
        <el-col :span="24">
          <video
            v-if="detail.videoUrl"
            v-bind:src="detail.videoUrl"
            class="avatar video-avatar"
            controls="controls"
            width="60%"
            height="200px"
          >您的浏览器不支持视频播放</video>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button round @click="dialog.visible = false">关 闭</el-button>
      </div>
    </el-dialog>
    <div>
      <el-form :model="queryParam" ref="queryParam" inline>
        <el-form-item label="用户来源:" label-width="100px" prop="sourceType">
          <el-select v-model="queryParam.sourceType" placeholder="请选择用户来源" clearable>
            <el-option
              v-for="item in fromList"
              :key="item.key"
              :label="item.label"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围:" label-width="100px" prop="timespan">
          <el-date-picker
            v-model="queryParam.timespan"
            type="daterange"
            unlink-panels
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList()">搜索</el-button>
          <el-button @click="resetForm('queryParam')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="box-card">
          <div class="boxcard-body">
            <el-table
              :data="list"
              style="width: 100%;"
              row-key="id"
              :header-cell-style="{ 'background-color': '#EEEEEE' }"
            >
              <el-table-column label="姓名" width="180" prop="name"></el-table-column>
              <el-table-column label="手机号" width="180" prop="tel"></el-table-column>
              <el-table-column label="打卡时间" width="180" prop="punchTime"></el-table-column>
              <el-table-column label="获得积分" width="180" prop="points"></el-table-column>
              <el-table-column label="打卡内容" width="180" prop="memo"></el-table-column>
              <el-table-column label="打卡图片" prop="imageUrls">
                <template slot-scope="scope">
                  <el-image
                    v-for="imageUrl in scope.row.imageUrls"
                    :src="imageUrl"
                    :key="imageUrl"
                    style="width:60px;height:60px" :preview-src-list="[imageUrl]"
                  />
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="180">
                <template slot-scope="scope">
                  <el-button type="warning" size="small" @click="detailDialog(scope.row)">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.currentPage"
              :page-sizes="page.pageSizes"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            ></el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      dialog: {
        title: "打卡信息",
        visible: false
      },
      formLabelWidth: "100px",
      list: [],
      rules: {},
      page: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50]
      },
      detail: {
        id: "",
        customerId: "",
        phoneNum: "",
        name: "",
        punchTime: "",
        memo: "",
        imageUrls: [],
        videoUrl: "",
        points: ""
      },
      queryParam: {
        timespan: null,
        sourceType: null
      },
      fromList: [
        { key: 1, label: "医生推荐" },
        { key: 2, label: "代理推荐" },
        { key: 3, label: "客户" },
        { key: 4, label: "门店" },
        { key: 5, label: "筛查活动" },
        { key: 6, label: "其他" }
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  watch: {},
  methods: {
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getList();
    },
    detailDialog(row) {
      this.dialog.visible = true;
      this.detail = row;
    },
    async getList() {
      let date1 = null,
        date2 = null;
      if (this.queryParam.timespan != null && this.queryParam.timespan.length > 1) {
        date1 = this.queryParam.timespan[0];
        date2 = this.queryParam.timespan[1];
      }
      await this.$https
        .get("/punchCard/pagePunchCard", {
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize,
          startDate: date1,
          endDate: date2,
          sourceType: this.queryParam.sourceType
        })
        .then(res => {
          this.list = res.data.data.list;
          this.page.total = Number.parseInt(res.data.data.total);
          this.page.currentPage = res.data.data.pageNum;
          this.list.forEach(item => {
            if (item.imageUrls) {
              item.imageUrls = JSON.parse(item.imageUrls);
            } else {
              item.imageUrls = [];
            }
          });
        });
    },
    resetForm(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].resetFields();
        if (formName == "queryParam") {
          this.getList();
        }
      }
    }
  }
};
</script>

<style lang="less"></style>
